* {
    margin         : 0;
    padding        : 0;
    list-style     : none;
    text-decoration: none;
    word-wrap      : break-word
}

body {
    background: rgba(0, 0, 0, .4);
}

html,
body,
#app {
    width  : 100%;
    height : 100%;
    margin : 0;
    padding: 0;
}

#app {
    display        : flex;
    align-items    : center;
    justify-content: center;
    ;
}

.book {
    width   : 100%;
    height  : 100%;
    width   : 100px;
    height  : 200px;
    position: absolute;

    // overflow: hidden;
    >.page {
        width        : 100%;
        height       : 100%;
        // background: #ffffff;
        position     : relative;

        >div {
            position  : absolute;
            overflow  : hidden;
            background: rgba(102, 51, 153, 0.3);

            // transform-origin: 100% 100%;
            >div {
                position  : absolute;
                background: #ffffff;
            }
        }
    }

    >.effect {
        pointer-events: none;
        width         : 100%;
        height        : 100%;
        position      : absolute;
        background    : rgba(238, 130, 138, 0.5);
        z-index       : 1;
        overflow      : hidden;

        >.horn {
            position  : absolute;
            background: rgba(100, 149, 237, 0.5);
        }
    }
}